<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    title="修改当前用户密码"
    :isDetail="true"
    @ok="handleSubmit"
  >
    <div class="py-8 bg-white flex flex-col justify-center items-center">
      <BasicForm @register="register" />
      <!-- <div class="flex justify-center">
        <a-button @click="resetFields"> 重置 </a-button>
        <a-button class="!ml-4" type="primary" @click="handleSubmit"> 确认 </a-button>
      </div>-->
    </div>
    <a-divider />
    <div>
      <h3><SoundTwoTone twoToneColor="#eb2f96" /> 说明</h3>
      <h4></h4>
      <p>1. 修改成功后会自动退出当前登录。 </p>
    </div>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Divider } from 'ant-design-vue';
  import { SoundTwoTone } from '@ant-design/icons-vue';

  export default defineComponent({
    components: {
      [Divider.name]: Divider,
      SoundTwoTone,
    },
  });
</script>
<script setup lang="ts">
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { updaetePassword } from '/@/api/admin/system';
  import { useUserStore } from '/@/store/modules/user';
  import { notify } from '/@/api/api';
  import { encryptByMd5 } from '/@/utils/cipher';

  const formSchema: FormSchema[] = [
    {
      field: 'passwordOld',
      label: '当前密码',
      component: 'InputPassword',
      rules: [
        {
          required: true,
          // @ts-ignore
          validator: async (rule, value) => {
            if (!value) {
              return Promise.reject('请输入当前密码');
            }
            if (!/^[A-Za-z0-9@]{6,20}$/.test(value)) {
              return Promise.reject('密码为6-20个字母加数字组成');
            }
            return Promise.resolve();
          },
          trigger: 'change',
        },
      ],
    },
    {
      field: 'passwordNew',
      label: '新密码',
      component: 'StrengthMeter',
      componentProps: {
        placeholder: '新密码',
      },
      rules: [
        {
          required: true,
          // @ts-ignore
          validator: async (rule, value) => {
            if (!value) {
              return Promise.reject('请输入新密码');
            }
            if (!/^[A-Za-z0-9@]{6,20}$/.test(value)) {
              return Promise.reject('密码为6-20个字母加数字组成');
            }
            return Promise.resolve();
          },
          trigger: 'change',
        },
      ],
    },
    {
      field: 'confirmPassword',
      label: '确认密码',
      component: 'InputPassword',
      dynamicRules: ({ values }) => {
        return [
          {
            required: true,
            validator: (_, value) => {
              if (!value) {
                return Promise.reject('请输入确认密码');
              }
              if (value !== values.passwordNew) {
                return Promise.reject('两次输入的密码不一致!');
              }
              return Promise.resolve();
            },
          },
        ];
      },
    },
  ];

  const [register, { validate, resetFields }] = useForm({
    size: 'large',
    labelWidth: 100,
    showActionButtonGroup: false,
    schemas: formSchema,
  });

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async () => {
    try {
      resetFields(); // 重置
      setDrawerProps({ loading: true }); // loading
    } finally {
      setDrawerProps({ loading: false }); // loading
    }
  });

  // 提交
  async function handleSubmit() {
    const values = await validate();
    try {
      setDrawerProps({ loading: true });
      values.passwordOld = encryptByMd5(values.passwordOld);
      values.passwordNew = encryptByMd5(values.passwordNew);
      values.confirmPassword = encryptByMd5(values.confirmPassword);
      // const { passwordOld, passwordNew } = values;
      // console.log('@@@ password', passwordOld, passwordNew);

      // 修改密码
      await updaetePassword(values).then((res) => {
        notify(res, true);
        closeDrawer();
        setTimeout(() => {
          const userStore = useUserStore();
          userStore.logout(true);
        }, 1500);
      });
    } catch (error) {
      // 错误信息
      console.log(error);
    } finally {
      setDrawerProps({ loading: false });
    }
  }
</script>
